import React from 'react';
import cx from 'classnames';

import Modal from 'lib/components/Modal.jsx';
import Select from 'lib/components/Select.jsx';

import DateRangePickerEnhanced from '../../common/DateRangePickerEnhanced.jsx';

import FavoriteScope from './FavoriteScope.es6';

export default class FavoriteView extends Modal {
  nameChangeHandler({ target: { value } }) {
    this.dispatcher.dispatch({
      $type: 'change_name',
      name: value.trim()
    });
  } // nameChangeHandler

  timeChangeHandler(item) {
    this.dispatcher.dispatch({
      $type: 'change_time',
      item
    });
  } // timeChangeHandler

  saveHandler() {
    this.dispatcher.dispatch({
      $type: 'add_bookmark'
    });
  } // saveHandler

  removeHandleer() {
    this.dispatcher.dispatch({
      $type: 'remove_bookmark',
      id: this.props.id
    });
  } // removeHandleer

  updateHandler() {
    this.dispatcher.dispatch({
      $type: 'update_bookmark',
      id: this.props.id
    });
  } // updateHandler

  renderHeader() {
    return (
      this.props.id === undefined
        ? (<h4>保存收藏</h4>)
        : (<h4>编辑收藏</h4>)
    );
  }

  renderBody() {
    return (
      <div className="favorite">
        <div className="form-group horizontal">
          <ul>
            <li>
              <label className="control-label">分析事件名</label>
              <input
                type="text"
                className="input-text"
                onChange={ this.nameChangeHandler.bind(this) }
                value ={ this.state.name } />
              {
                this.state.nameError
                  ? (
                    <div className="note-attention">{ this.state.nameError }</div>
                  ) : null
              }
            </li>
            <li>
              <label className="control-label">默认时间范围</label>
              <DateRangePickerEnhanced
                canHaveCustom={ false }
                showAlias={ true }
                isNatural={ this.state.selectedItem.isNatural }
                isCustom={ this.state.selectedItem.isCustom }
                alias={ this.state.selectedItem.item.alias }
                spanTime={ this.state.selectedItem.item.value.spanTime }
                endTime={ this.state.selectedItem.item.value.endTime }
                onCompleted={ this.timeChangeHandler.bind(this) } />
            </li>
          </ul>
        </div>
      </div>
    );
  }

  renderFooter() {
    let btnOkClass = cx({
      'btn-green': !this.state.isProcessing,
      'btn-disabled': this.state.isProcessing
    });

    let btnBLueClass = cx({
      'btn-blue': !this.state.isProcessing,
      'btn-disabled': this.state.isProcessing
    });

    return (
      this.props.id === undefined
        ? (
          <div>
            <a href="#" style={{ marginRight: 10 }} onClick={ this.close }>取消</a>
            <button className={ btnOkClass } onClick={ this.saveHandler.bind(this) }>保存</button>
          </div>
        ) : (
          <div className="clearfix">
            {
              this.state.inProcessing
                ? <span className="float-left text-gray cursor-disabled">&times; 删除收藏</span>
                : <a href="javascript:;" className="float-left text-red" onClick={ this.removeHandleer.bind(this) }>&times; 删除收藏</a>
            }
            <div className="float-right">
              <a href="#" style={{ marginRight: 10 }} onClick={ this.close }>取消</a>
              <button
                className={ btnBLueClass }
                disabled={ this.state.isProcessing }
                onClick={ this.saveHandler.bind(this) }>
                新建收藏
              </button>
              <button
                className={ btnOkClass }
                disabled={ this.state.isProcessing }
                onClick={ this.updateHandler.bind(this) }>
                更新收藏
              </button>
            </div>
          </div>
        )
    );
  }
}

FavoriteView.defaultProps = {
  Scope: FavoriteScope
}
